// 导入模块
import { h, init } from 'snabbdom'
import classes from 'snabbdom/modules/class'
import props from 'snabbdom/modules/props'
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'

// 导入数据
import originalData from './originalData'

let data = [ ...originalData ]
let vnode = null
let margin = 8
let totalHeight = 0
let nextKey = 11
let sortBy = 'rank'

// 注册模块
let patch = init([
    classes,
    props,
    style,
    eventlisteners
])

// 数据排序
function sortData (prop) {
    sortBy = prop
    data.sort((a, b) => {
        if (a[prop] > b[prop]) {
            return 1
          }
          if (a[prop] < b[prop]) {
            return -1
          }
          return 0
    })
    render()
}

// 添加单条数据
function add () {
    let item = originalData[Math.floor(Math.random() * 10)]
    data = [
        {
            ...item,
            rank: nextKey++,
            elmHeight: 0
        },
        ...data
    ]
    render()
    render()
}

// 移除数据
function remove (movie) {
    data = data.filter(item => item !== movie)
    render()
}

// 生成单条数据vnode
function movieView (movie) {
    return h('div.row', {
        key: movie.rank,
        style: {
            opacity: '0',
            transform: 'translate(-200px)',
            delayed: {
                transform: `translateY(${movie.offset}px)`,
                opacity: '1' 
            },
            remove: {
                opacity: '0',
                transform: `translateY(${movie.offset}px) translateX(200px)` 
            }
        },
        hook: {
            insert: vnode => {
                movie.elmHeight = vnode.elm.offsetHeight
            }
        }
    },[
        h('div', {
            style: {
                fontWeight: 'bold'
            }
        }, movie.rank),
        h('div', movie.title),
        h('div', movie.desc),
        h('div.btn.rm-btn', {
            on: {
                click: [remove, movie]
            }
        }, 'x'),
    ])
}

// 生成container vnode
function view (data) {
    return h('div#container', [
        h('h1', `Top ${data.length} movies`),
        h('div', [
            h('a.btn.add', {
                on: {
                    click: add
                }
            }, 'add'),
            'Sort by:',
            h('span.btn-group', [
                h('a.btn.rank', {
                    class: {
                        active: sortBy === 'rank'
                    },
                    on: {
                        click: [sortData, 'rank']
                    }
                }, 'Rank'),
                h('a.btn.title', {
                    class: {
                        active: sortBy === 'title'
                    },
                    on: {
                        click: [sortData, 'title']
                    }
                }, 'Title'),
                h('a.btn.desc', {
                    class: {
                        active: sortBy === 'desc'
                    },
                    on: {
                        click: [sortData, 'desc']
                    }
                }, 'Description')
            ]),
            h('div.list', {
                style: {
                    height: totalHeight + 'px'
                }
            }, data.map(movieView))
            
        ])
    ])
}

// 渲染数据
function render () {
    // 处理数据
    data = data.reduce((list, movie) => {
        // 计算offsetTop
        const last = list[list.length - 1]
        movie.offset = last ? last.offset + last.elmHeight + margin : margin
        return list.concat(movie)
    }, [])
    // 计算列表高度
    totalHeight = data[data.length - 1].offset + data[data.length - 1].elmHeight
    vnode = patch(vnode, view(data))
}

window.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('#container')
    vnode = patch(container, view(data))
    render()
})


